<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Bus tracer')"></h3>
    </template>
    
    <!-- 通道选择区域 -->
    <el-row :gutter="8" v-for="row in 8" :key="row">
      <el-col :span="4" v-for="col in 6" :key="col">
        <el-checkbox 
          :model-value="busTracerStore.channelStates[(row-1)*6 + col-1]"
          @change="busTracerStore.toggleChannel((row-1)*6 + col-1)">
          CH{{ (row-1)*6 + col }}
        </el-checkbox>
      </el-col>
    </el-row>

    <el-row>
      <el-divider style="margin: 8px 0;" />
    </el-row>

    <!-- 总线数据显示区域 -->
    <template v-for="(item, index) in busTracerStore.busData" :key="index">
      <el-row v-show="busTracerStore.channelStates[item.channel - 1]"
              class="bus-data-row" 
              :gutter="8" 
              @click="busTracerStore.toggleDetails(item.orderID)">
        <el-col :span="2">
          <span>{{ item.type }}</span>
        </el-col>
        <el-col :span="2">
          <span>CH{{ item.channel }}</span>
        </el-col>
        <el-col :span="3" style="text-align: right; padding-right: 8px;">
          <span>0x{{ Number(item.localID).toString(16).toUpperCase() }}</span>
        </el-col>
        <el-col :span="4">
          <span>{{ item.time && !isNaN(Number(item.time)) ? Number(item.time).toFixed(6) : '---' }}</span>
        </el-col>
        <el-col :span="3">
          <span>{{ item.fps && !isNaN(Number(item.fps)) ? (Number(item.fps).toFixed(0) + "fps") : '---' }}</span>
        </el-col>
        <el-col :span="5">
          <span style="text-align: right;">{{ item.protocol || '---' }}</span>
        </el-col>
        <el-col :span="5">
          <span>{{ item.messageName || '---' }}</span>
        </el-col>
      </el-row>
      
      <!-- 详细信息展开区域 - 紧跟在对应行下面 -->
      <el-row class="bus-data-row" v-if="busTracerStore.channelStates[item.channel - 1] && item.showDetails && item.details.length > 0">
        <el-col :span="24">
          <el-row v-for="(detail, detailIndex) in item.details" :key="detailIndex" :gutter="8">
            <el-col :span="7" style="text-align: right; padding-right: 8px;">
              <span class="text-orange">{{ detail.key }}</span>
            </el-col>
            <el-col :span="17">
              <span class="text-orange">{{ detail.value }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
  </el-card>
</template>

<script setup>
import { useBusTracerStore } from '@/stores/busTracer'
import { useLanguageStore } from '@/stores/language'

const busTracerStore = useBusTracerStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Bus tracer': {
      'en': 'Bus tracer',
      'zh': '总线数据监控'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>

<style scoped>
:deep(.el-row) {
  margin-bottom: 0;
}

.bus-data-row {
  font-size: 12px;
  cursor: pointer;
}

.bus-data-row:hover {
  color: #ff8c00;
}

.text-orange {
  color: #ff8c00;
}
</style> 